<template>
  <PageWrapper v-loading="loading" loading-tip="加载中...">
    <div class="p-4 p-4-tag">
      <div class="tag">
        <BasicTable
          :columns="columns"
          :dataSource="tableData"
          :canResize="false"
          :showIndexColumn="false"
          :striped="true"
          :bordered="true"
          :pagination="false"
          :actionColumn="
            hasPermission(['4-2-add', '4-2-update', '4-2-del']) ? actionColumn : undefined
          "
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <TableAction
                :actions="[
                  {
                    label: '新增设备',
                    icon: 'ant-design:plus-outlined',
                    ifShow: hasPermission('4-2-add'),
                    disabled: +record.TagType === 2,
                    onClick: handleAdd.bind(null, record),
                  },
                  {
                    label: '编辑',
                    icon: 'ant-design:edit-outlined',
                    ifShow: hasPermission('4-2-update'),
                    disabled: +record.TagType === 2,
                    onClick: handleEdit.bind(null, record),
                  },
                  {
                    label: '删除',
                    icon: 'ant-design:delete-outlined',
                    ifShow: hasPermission('4-2-del'),
                    disabled: +record.TagType === 2,
                    onClick: handleDelete.bind(null, record),
                  },
                ]"
              />
            </template>
          </template>
          <template #toolbar>
            <a-button type="primary" @click="handleSave" v-if="hasPermission('4-2-save')">
              保存到配置文件
            </a-button>
          </template>
        </BasicTable>
        <!-- <div class="flex py-2 items-center justify-end pagination-box">
          <a-pagination
            :show-total="(total) => `共 ${total} 条数据`"
            showSizeChanger
            size="small"
            :current="paginationInfo.data.current"
            :pageSize="paginationInfo.data.pageSize"
            :total="paginationInfo.data.total"
            @change="handlePageChange"
          />
        </div> -->
      </div>
    </div>

    <modelByDel @register="registerByDel" @submit-success="handleDelSuccess" :info="detailForm" />
    <modelByAdd @register="registerByAdd" @submit-success="handleAddSuccess" :info="detailForm" />
    <modelByEdit @register="registerByEdit" :info="detailForm" @close-sync="getTemplateList" />
  </PageWrapper>
</template>

<script setup lang="ts">
  import { usePermission } from '/@/hooks/web/usePermission';
  import { PageWrapper } from '/@/components/Page';
  import { BasicColumn } from '/@/components/Table/src/types/table';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useModal } from '/@/components/Modal';
  import modelByAdd from '/@/views/project/templateManagement/components/modelByAdd.vue';
  import modelByEdit from '/@/views/project/templateManagement/components/modelByEdit.vue';
  import modelByDel from '/@/views/project/templateManagement/components/modelByDel.vue';

  import { onMounted, ref, reactive, h } from 'vue';
  import { gettemplatecollection, saveConfig } from '/@/api/tag/index';
  // import { cloneDeep } from 'lodash-es';
  // import { Pagination } from 'ant-design-vue';
  // const APagination = Pagination;
  const { createConfirm, createMessage } = useMessage();
  const { t } = useI18n();
  // 表单数据
  let columns: BasicColumn[] = [
    {
      title: '模板名称',
      dataIndex: 'Name',
    },
    {
      title: '设备类型',
      dataIndex: 'DriverType',
    },
    {
      title: '备注',
      dataIndex: 'Description',
    },
  ];
  let detailForm = reactive({
    data: {},
  });
  let loading = ref(false);
  let actionColumn = {
    width: 150,
    title: '操作',
    dataIndex: 'action',
    // slots: { customRender: 'action' },
  };
  const { hasPermission } = usePermission();
  let tableData = reactive([]);
  const [registerByAdd, { openModal: openModalByAdd, closeModal: closeModalByAdd }] = useModal();
  const [registerByDel, { openModal: openModalByDel, closeModal: closeModalByDel }] = useModal();

  const [registerByEdit, { openModal: openModalByEdit }] = useModal();

  // // 分页信息
  // let paginationInfo = reactive({
  //   data: {
  //     pageSize: 10,
  //     total: 0,
  //     current: 1,
  //   },
  // });
  // 切换页面
  // function handlePageChange(page, pageSize) {
  //   paginationInfo.data.current = page;
  //   paginationInfo.data.pageSize = pageSize;
  //   // setTagList();
  // }

  // 获取模板列表
  async function getTemplateList() {
    loading.value = true;
    try {
      let res = await gettemplatecollection();
      tableData = res;
      loading.value = false;
    } catch (error) {
      loading.value = false;
    }
  }
  //  添加成功
  function handleAddSuccess() {
    getTemplateList();

    closeModalByAdd();
  }
  // 删除成功
  function handleDelSuccess() {
    getTemplateList();
    closeModalByDel();
  }
  // 新增方法
  function handleAdd(record: Recordable) {
    detailForm.data = record;
    openModalByAdd();
  }
  function handleSave() {
    createConfirm({
      iconType: 'warning',
      title: () => h('span', '温馨提示'),
      okText: '确认',
      content: () => h('span', `此操作将会把页面内容保存到配置文件，是否确认该操作？`),
      onOk: async () => {
        try {
          await saveConfig();
          createMessage.success(t('layout.setting.operatingTitle'));
        } catch (error) {}
      },
    });
  }
  // 编辑方法
  function handleEdit(record: Recordable) {
    detailForm.data = record;
    openModalByEdit();
  }
  // 删除方法
  function handleDelete(record: Recordable) {
    detailForm.data = record;
    openModalByDel();
  }
  onMounted(async () => {
    getTemplateList();
  });
</script>
<script lang="ts">
  export default {
    name: 'TemplateManagementPage',
  };
</script>
<style lang="less" scoped>
  .p-4-tag {
    width: 100%;
    height: 100%;
    padding: 0px !important;

    .tag {
      position: relative;
      overflow: hidden;
      height: 100%;
      background-color: #fff;
    }
  }
</style>
